<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.stack.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.resize.js'></script>

<div class="page-header">
    <div class="icon">
        <span class="ico-chart-2"></span>
    </div>
    <h1>REPORTE POR ZONAS<small>Por Zonas</small></h1>
</div>

<div class="row-fluid">

    <div class="block">
        <div class="head">
            <h2>Zonas La Paz</h2>
        </div>
        <div class="data">
            <div id="crt" style="height: 300px;"></div>
        </div>  

    </div>  

    <div class="block">
        <div class="head purple">
            <div class="icon"><span class="ico-location"></span></div>
            <h2>Reportes por Zonas</h2>     
            <ul class="buttons">
                <li><a href="#" onClick="source('table_hover');
                                            return false;"><div class="icon"><span class="ico-info"></span></div></a></li>
            </ul>                                                          
        </div>                
        <div class="data-fluid">
            <table cellpadding="0" cellspacing="0" width="100%" class="table table-hover">
                <thead>
                    <tr>
                        <th width="25%">Nombre</th>
                        <th width="25%">Zona</th>
                        <th width="25%">Monto Total(Bs.)</th>
                    </tr>
                </thead>
                <tbody>
                <?php $i = 0;?>
                <?php foreach($reporte as $re):$i++;?>
                    <tr>
                        <td><?php echo $re['User']['nombre'];?></td>
                        <td><?php echo $re['Zona']['nombre'];?></td>
                        <td><?php echo $re['User']['monto_tmp'];?></td>
                    </tr>
                <?php endforeach;?>                   
                </tbody>
            </table>
        </div>                
    </div>

</div>
<script type="text/javascript">

                                        if ($("#crt").length > 0) {

                                            var d1 = [];
                                            for (var i = 0; i <= 10; i += 1) {
                                                d1.push([i, parseInt(Math.random() * 30)]);
                                                //console.log(parseInt(Math.random() * 30));
                                            }

                                            var d2 = [];
                                            for (var i = 0; i <= 10; i += 1)
                                                d2.push([i, parseInt(Math.random() * 30)]);

                                            var d3 = [];
                                            for (var i = 0; i <= 10; i += 1)
                                                d3.push([i, parseInt(Math.random() * 30)]);

                                            var stack = 0, bars = true, lines = false, steps = false;

                                            $.plot($("#crt"), [{data: d1, label: "Ventas"}, {data: d2, label: "Pedidos"}, {data: d3, label: "Facturados"}], {
                                                series: {
                                                    stack: stack,
                                                    lines: {show: lines, fill: true, steps: steps},
                                                    bars: {show: bars, barWidth: 0.6}
                                                }
                                            });

                                        }
</script>
